<template>
  <van-popup
    closeable
    class="pay-type-pop"
    :show="show"
    custom-style="height:595rpx;padding: 0 30rpx;"
    @close.native="onClose"
    position="bottom"
  >
    <van-cell>
      <view slot="title" class="model-title">
        请选择支付方式
      </view></van-cell
    >
    <van-cell
      center
      custom-class="cell-box"
      v-for="(item, index) in payTypeList"
      :key="index"
      @click="onSelectPayType(item.type)"
    >
      <text slot="icon" :class="item.icon + '-icon'"></text>
      <view slot="title" class="title">
        <div>
          {{ item.name
          }}<block v-if="item.type == 1">
            (剩余{{ userInfo.amount_name }})</block
          >
        </div>
        <div class="tips-t" v-if="item.tips && isPay">{{ item.tips }}</div>
      </view>
      <text
        slot="right-icon"
        class="radio-icon"
        :class="{ active: item.type == payType }"
      ></text>
    </van-cell>
  </van-popup>
</template>
<script>
import { mapState } from "vuex";
import vanPopup from "@/wxcomponents/vant/popup/index";
import vanCell from "@/wxcomponents/vant/cell/index";
export default {
  props: { show: Boolean, payType: Number, isPay: Boolean },
  components: { vanPopup, vanCell },
  data() {
    return {
      payTypeList: [
        { name: "微信支付", icon: "wx", type: 2 },
        { name: "余币支付", icon: "ye", type: 1, tips: "余币不足" },
      ],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    onSelectPayType(type) {
      this.$emit("updatePayWay", type);
      this.$emit("closePayWay", false);
    },
    onClose() {
      this.$emit("closePayWay", false);
    },
  },
};
</script>
<style lang="scss">
.pay-type-pop {
  .cell-box {
    padding: 26rpx 0;
  }
  .model-title {
    color: #999;
    font-size: 28rpx;
    padding: 10rpx 0;
  }
  .title {
    color: #333333;
    font-size: 32rpx;
    margin-left: 30rpx;
    .tips-t {
      color: #b2b2b2;
    }
  }
  .wx-icon {
    width: 64rpx;
    height: 64rpx;
    background: url(https://media.wxcwy.com/mini/images/vx_icon2@2x.png) no-repeat;
    background-size: 100%;
  }
  .ye-icon {
    width: 64rpx;
    height: 64rpx;
    background: url(https://media.wxcwy.com/mini/images/shb_icon@2x.png) no-repeat;
    background-size: 100%;
  }
  .radio-icon {
    width: 36rpx;
    height: 36rpx;
    background: url(https://media.wxcwy.com/mini/images/zfselg_icon@2x.png) no-repeat;
    background-size: 100% 100%;
    &.active {
      background: url(https://media.wxcwy.com/mini/images/rzget_icon@2x.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
